<template>
  <div class="container">
    <div>
      <!-- 信息汇总 -->
      <div class="resource-main">
        <div class="resource-instance-item">
          <div class="icon-item">
            <el-icon><Monitor /></el-icon>
          </div>
          <div class="item-content">
            <div class="title">
              <h4>数据服务云平台</h4>
            </div>
            <div class="number">
              <span>12</span>
            </div>
          </div>
        </div>
        <div class="resource-instance-item">
          <div class="icon-item green">
            <el-icon><Comment /></el-icon>
          </div>
          <div class="item-content">
            <div class="title">
              <h4>数据消息</h4>
            </div>
            <div class="number">
              <span>13</span>
            </div>
          </div>
        </div>
        <div class="resource-instance-item">
          <div class="icon-item orange">
            <el-icon><Sell /></el-icon>
          </div>
          <div class="item-content">
            <div class="title">
              <h4>数据服务进帐</h4>
            </div>
            <div class="number">
              <span>78</span>
            </div>
          </div>
        </div>
        <div class="resource-instance-item">
          <div class="icon-item yellow">
            <el-icon><SoldOut /></el-icon>
          </div>
          <div class="item-content">
            <div class="title">
              <h4>数据服务出账</h4>
            </div>
            <div class="number">
              <span>19</span>
            </div>
          </div>
        </div>
        <div class="resource-instance-item">
          <div class="icon-item purple">
            <el-icon><Coin /></el-icon>
          </div>
          <div class="item-content">
            <div class="title">
              <h4>数据服务数据总量</h4>
            </div>
            <div class="number">
              <span>17</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 可视化图表 -->
      <div class="resource-content">
        <!-- 三分之二左边图表 -->
        <div class="charts-panel">
          <DataSetCharts />
        </div>
        <!-- 三分之一右边进度 -->
        <div class="timeline-panel">
          <TimelineCommon />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import DataSetCharts from "@/components/echarts/dataset.vue";
import TimelineCommon from "@/components/echarts/timeline.vue";
</script>

<style lang="scss" scoped>
.container {
  .resource-main {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }

  .resource-instance-item {
    display: flex;
    padding: 0 12px;
    align-items: center;
    width: 200px;
    width: 100%;
    min-height: 120px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    margin-right: 10px;

    .icon-item {
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 70px;
      min-height: 60px;
      background: rgba(20, 118, 255, 0.8);
      border-radius: 8px;
    }

    .green {
      background: rgba(101, 203, 115, 1);
    }

    .orange {
      background: rgb(230, 74, 35);
    }

    .yellow {
      background: rgb(238, 241, 20);
    }

    .purple {
      background: rgb(238, 17, 227);
    }

    .item-content {
      min-width: 110px;
      width: 100%;
      padding: 10px;

      .title {
        line-height: 40px;
      }

      .number {
        font-size: 18px;
        font-weight: 600;
        line-height: 30px;
      }
    }

    .el-icon {
      font-size: 50px;
      color: #ffffff;
    }
  }

  .resource-content {
  display: flex;
  width: 100%;

  .charts-panel {
    margin: 20px;
    flex-grow: 1; // 让 charts-panel 填充剩余空间
    // max-width: 100%; // 移除或根据需要调整
  }

  .timeline-panel {
    margin: 20px;
    width: 33.3333%; // 假设你想要三分之一宽度
    // max-width: 100%; // 移除或根据需要调整
  }
}
}
</style>